<?php 
$this->headLink()
          ->appendStylesheet($this->baseUrl() . '/application/modules/talktangle/externals/styles/main.css');
 $this->headScript()
      ->appendFile($this->baseUrl() . '/application/modules/talktangle/externals/scripts/crosstangle.js');
 $this->headScript()
      ->appendFile($this->baseUrl() . '/application/modules/talktangle/externals/scripts/main.js');
  
?>

<div class="grid" style="position:relative; width:602px; height:460px;"> 
<?php
    $count = count($this->anphabetic)-1;
    
    $settingApi = Engine_Api::_()->getApi('settings','core');
    $rowCount =   $settingApi->getSetting('talktangle.cross.rowcount',15);//15;
    $columCount = $settingApi->getSetting('talktangle.cross.colcount',15);//15;
    
    $index = 0;
    for($row = 1;$row<=$rowCount;$row++){
        for($col = 1;$col<=$columCount;$col++){
            $rand = mt_rand(0,$count);
            $value = $this->anphabetic[$rand] ;
            if(isset($this->matric[$row-1][$col-1])) {
                $value =  $this->matric[$row-1][$col-1];
            }
            
            echo '<div class = "cell row'.$row.' col'.$col.' index-'.$index.' text-'.$value.'">'.$value .'</div>';
            $index++;
        }
    }
?>
<div id="command_use_id" class="command_use_id"> use it</div>
</div>
<div class="cross_choose_result_label"> you select:</div>
<div id="cross_choose_result" class="cross_choose_result">
 
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    <div class="crosstangle_select_word_dragable" style="display:none;">
    </div>
    
</div>
<div class="cross_choose_result_send"> Send</div>

<script type="text/javascript">
    var crosstangle = new crossTangle($('global_content'),1,1);
   
    
    
</script>